﻿@using SelfMadeMillionaire.Core.Enums
@using SelfMadeMillionaire.Core

@model SelfMadeMillionaire.Web.Infrastructure.ViewModels.MailingList.SubscribeViewModel
@{
	ViewBag.Title = "Subscribe";
	Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="@Url.Content("~/Scripts/subscribe.js")"></script>

<style>
    .control-label
    {
        text-align: left !important;        
    }
</style>

<div class="row">
	<div class="col-sm-12 col-md-12 col-lg-12">

		<!--left content block-->
		<div class="left_col_block">
			<div class="content_block_title">
				<h5>Subscribe</h5>
				<div class="title_bottom_arrow">
					<img src="@Url.Content("~/Content/images/down_arrow.png")" alt="" />
				</div>
			</div>

			<!--subcribe-->
			<div class="biography_container">
				@using (Html.BeginForm("Subscribe", "MailingList", FormMethod.Post, new {@class = "form-horizontal"}))
				{
                    @Html.HiddenFor(m => m.PromoCode)
                    @Html.HiddenFor(m => m.Mailing)
					
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td colspan="2" style="padding-left: 55px !important;">
                                    @Html.ValidationSummary()
                                </td>
                            </tr>
							<tr>
								<td valign="top" width="60%" style="padding-left: 40px !important;">
									<div class="form-group">
										@Html.LabelFor(m => m.FirstName, new {@class = "col-sm-3 control-label custom_label"})
										<div class="col-sm-6">
											@Html.TextBoxFor(m => m.FirstName, new {@class = "form-control", placeholder = "Enter your first name", tabindex = 1})
										</div>
                                        <div class="col-sm-3" style="padding-left:0 !important">
                                            <a class="btn btn-social-icon btn-facebook" href="@Url.Action("Login", "Facebook")"
                                                style="font-size:10px; width:100%">
                                                <i class="fa fa-facebook-square">
                                                    <span style="margin-left:5px;font-family: 'Droid Sans', Tahoma, Geneva, sans-serif !important">Login with Facebook</span></i>
                                            </a>
                                        </div>
									</div>

									<div class="form-group">
										@Html.LabelFor(m => m.LastName, new {@class = "col-sm-3 control-label custom_label"})
										<div class="col-sm-6">
											@Html.TextBoxFor(m => m.LastName, new {@class = "form-control", placeholder = "Enter your last name", tabindex = 2})
										</div>
									</div>

									<div class="form-group">
										@Html.LabelFor(m => m.Email, new {@class = "col-sm-3 control-label custom_label"})
										<div class="col-sm-6">
											@Html.TextBoxFor(m => m.Email, new {@class = "form-control", placeholder = "Enter your email address", tabindex = 3, autocomplete = "off"})
										</div>
									</div>
									<div class="form-group">
										@Html.LabelFor(m => m.Password, new {@class = "col-sm-3 control-label custom_label"})
										<div class="col-sm-6">
											@Html.PasswordFor(m => m.Password, new {@class = "form-control", placeholder = "Enter your password", tabindex = 3, autocomplete = "off"})
										</div>
									</div>
									<div class="form-group">
										@Html.LabelFor(m => m.ConfirmPassword, new {@class = "col-sm-3 control-label custom_label"})
										<div class="col-sm-6">
											@Html.PasswordFor(m => m.ConfirmPassword, new {@class = "form-control", placeholder = "Confirm your password", tabindex = 3, autocomplete = "off"})
										</div>
									</div>

								</td>
							</tr>
                            </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td colspan="3">
                                    <div class="content_block_title">
                                    <h5>Subscription Options <a target="_blank" href="Services by Subscription Level.pdf" style="float:right;color:white">
						                        Compare Options&nbsp;<img src="@Url.Content("~/Content/images/pdf_icon.png")" alt="Compare Subscription Options" title="Compare Subscription Options" /></a>
                                    </h5>
            
                                    <div class="title_bottom_arrow">
					                        <img src="@Url.Content("~/Content/images/down_arrow.png")" alt="" />
			                        </div>
                                    </div>
                                </td>
                            </tr>
							
                            <tr>
                                <td style="padding-left:20px;" colspan="2">
                                    <div class="col-sm-3">
                                            @Html.RadioButtonFor(m => m.ProductType, CoreConstants.FREE_SUBSCRIPTION, new { name = "ProductType", id="rbFree" }) <label for="rbFree" class="custom_label">Free</label>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="custom_label" style="padding-left:12px;">$0</label>
                                    </div>
                                </td>
                                <td rowspan="4" style="width:110px">
                                    <img src="content/images/money_back.jpg" />
                                </td>

                            </tr>
                            <tr>
                                <td style="padding-left:20px;" colspan="2">
                                    <div class="col-sm-3">
                                            @Html.RadioButtonFor(m => m.ProductType, CoreConstants.UPGRADE_TO_SILVER_PRODUCT, new { name = "ProductType", id="rbSilver" }) <label for="rbSilver" class="custom_label">Silver</label>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="custom_label" id="lblSilverPrice" style="padding-left:12px;">$@(Model.SilverPrice.ToString("#0"))</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-left:20px;" colspan="2">
                                    <div class="col-sm-3">
                                            @Html.RadioButtonFor(m => m.ProductType, CoreConstants.UPGRADE_TO_GOLD_PRODUCT, new { name = "ProductType", id="rbGold" }) <label for="rbGold" class="custom_label">Gold</label>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="custom_label" id="lblGoldPrice" style="padding-left:12px;">$@(Model.GoldPrice.ToString("#0"))</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-left:20px;" colspan="2">
                                    <div class="col-sm-3">
                                            @Html.RadioButtonFor(m => m.ProductType, CoreConstants.UPGRADE_TO_PLATINUM_PRODUCT, new { name = "ProductType", id="rbPlatinum" }) <label for="rbPlatinum" class="custom_label">Platinum</label>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="custom_label" id="lblPlatinumPrice" style="padding-left:12px;">$@(Model.PlatinumPrice.ToString("#0"))</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-left:20px;" colspan="3">
                                    <label class="custom_label">Enter promo code: &nbsp;</label> <span id ="promocodevalue">@Html.TextBox("tbPromoCode", Model.PromoCode, new {@class = "form-control", placeholder = "Enter promo code", autocomplete = "off", style = "display: inline; width: auto;"})</span>
                                    <button id="applyPromoCode" class="btn btn-primary">Apply</button>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-left:20px;" colspan="3">
                                    <div id ="promoCodeErrorMessage" style="display: none;"></div>
                                </td>
                            </tr>

							<tr>
								<td colspan="3">
									<div class="newsletter_search_btn">
										<button type="submit" class="btn btn-primary">Subscribe</button> <label style="margin-left: 20px;" id="lblPayPalInfo">(You will be redirected to PayPal website)</label>
									</div>
								</td>
							</tr>

					</table>
        					
				}
			</div>

		</div>
	</div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#lblPayPalInfo').hide();
        $('#rbFree').click(function(){
            if ($(this).is(':checked'))
            {
                $('#lblPayPalInfo').hide();
            }
        });
        $('#rbSilver').click(function(){
            if ($(this).is(':checked'))
            {
                $('#lblPayPalInfo').show();
            }
        });
        $('#rbGold').click(function(){
            if ($(this).is(':checked'))
            {
                $('#lblPayPalInfo').show();
            }
        });
        $('#rbPlatinum').click(function(){
            if ($(this).is(':checked'))
            {
                $('#lblPayPalInfo').show();
            }
        });

        @if (!string.IsNullOrEmpty(Model.PromoCode))
        {
            <text>
                $("#applyPromoCode").prop('disabled', true);
                $("#tbPromoCode").prop('disabled', true);
            </text>
        }

        $("#applyPromoCode").click(function () {

            $("#applyPromoCode").prop('disabled', true);
            $("#tbPromoCode").prop('disabled', true);

            $.ajax({
                url: "@Url.Action("ApplyPromoCode", "MailingList")",
                type: "POST",
                data: { promocode: $("#tbPromoCode").val() },
                cache: false,
                success: function (result) {
                    if (result.message != "") {
                        $("#applyPromoCode").prop('disabled', false);
                        $("#tbPromoCode").prop('disabled', false);

                        $("#promoCodeErrorMessage").attr('style', 'display:inline-block; color: red');
                        $("#promoCodeErrorMessage").text(result.message);
                    } else {
                        $("#lblSilverPrice").text('$' + result.priceSilver);
                        $("#lblGoldPrice").text('$' + result.priceGold);
                        $("#lblPlatinumPrice").text('$' + result.pricePlatinum);
                        $("#promoCodeErrorMessage").attr('style', 'display:none');
                        $("#PromoCode").val($("#tbPromoCode").val());
                        //$("li.checkout").load("@Url.Action("PayPalForm")");
                    }


	            }
            });
            return false;
        });
    });
</script>